﻿@model IEnumerable<SportClubMvc.Model.SportsClubClasses.MemberModel>

<h2>Utøvere</h2>
<p class="big grey">Aktive utøvere sesongen 2012/13.</p>
<hr />
<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <h4>Legg til løper</h4>
    </div>
    <div class="modal-body" id="modalBody">
    </div>
</div>
<div class="row">
    <div class="span12">
        <div class="button">
            <ul>
                <li class="pull-right">@Ajax.ActionLink("Legg til løper", "Add", "Skate", new AjaxOptions { UpdateTargetId = "modalBody", HttpMethod = "get" }, new { @class = "btn-edit" })</li>
            </ul>
            <ul id="filters">
                <li><a href="#" data-filter="*">Alle klasser</a></li>
                <li><a href="#" data-filter=".JRA">Junior A</a></li>
                <li><a href="#" data-filter=".JRB">Junior B</a></li>
                <li><a href="#" data-filter=".JRC">Junior C</a></li>
                <li><a href="#" data-filter=".twelve">12 år</a></li>
                <li><a href="#" data-filter=".eleven">11 år</a></li>
                <li><a href="#" data-filter=".ten">10 år</a></li>
                <li><a href="#" data-filter=".recruits">Rekrutter</a></li>
            </ul>
        </div>
        <div id="portfolio">
            @foreach (var skater in Model)
            {
                <div class="element @skater.SkaterClass">
                    <img src="@skater.ImagePath" alt="" />
                    <div class="pcap">
                        <h4>@skater.Name</h4>
                        <p>Klasse @skater.SkaterClass</p>
                    </div>
                </div>    
            }
            <!-- Add the above used filter names inside div tag. You can add more than one filter names. For image lightbox you need to include "a" tag pointing to image link, along with the class "prettyPhoto[pp_gal]".-->
            <div class="element JRA">
                <img src="@Url.Content("~/Content/images/members/vegardhansen.jpg")" alt="" />
                <!-- Portfolio caption -->
                <div class="pcap">
                    <h4>Vegard Hansen</h4>
                    <p>Klasse Junior A</p>
                </div>
            </div>
            <div class="element twelve">
                <img src="@Url.Content("~/Content/images/members/annabraathen.jpg")" alt="" />
                <div class="pcap">
                    <h4>Anna Braaten</h4>
                    <p>Klasse 12 år</p>
                </div>
            </div>
            <div class="element twelve">
                <img src="@Url.Content("~/Content/images/members/selmaboelysoe.jpg")" alt="" />
                <div class="pcap">
                    <h4>Selma Bø Lysø</h4>
                    <p>Klasse 12 år</p>
                </div>
            </div>
            <div class="element recruits">
                <img src="@Url.Content("~/Content/images/members/ellaboelysoe.jpg")" alt="" />
                <div class="pcap">
                    <h4>Ella Bø Lysø</h4>
                    <p>Klasse rekrutt</p>
                </div>
            </div>
            <div class="element ten">
                <img src="@Url.Content("~/Content/images/members/saranataliebergh.jpg")" alt="" />
                <div class="pcap">
                    <h4>Sara Natalie Berg</h4>
                    <p>Klasse 10 år</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div class="row">
    <div class="span12">
        <h4>LØPERE</h4>
    </div>
</div>
<div class="row">
    <div class="span2">
        <ul class="nav nav-list" id="classList">
            <li class="active"><a href="#" data-toggle="tab">Alle løpere</a></li>
            <li class="nav-header" data-gender="0">Junior Gutter</li>
            <li><a href="#" data-toggle="tab">Klasse 1</a></li>
            <li><a href="#" data-toggle="tab">Klasse 2</a></li>
            <li><a href="#" data-toggle="tab">Klasse 3</a></li>
            <li class="nav-header" data-gender="1">Junior Jenter</li>
            <li><a href="#" data-toggle="tab">Klasse 1</a></li>
            <li><a href="#" data-toggle="tab">Klasse 2</a></li>
            <li><a href="#" data-toggle="tab">Klasse 3</a></li>

            <li>&nbsp;</li>
        </ul>
    </div>

    <div class="span10">
        <div class="row pull-right">
            <p>
                @*Ajax.ActionLink("Legg til løper", "Add", "Skate", new AjaxOptions { UpdateTargetId = "modalBody", HttpMethod = "get" }, new { @class = "btn btn-primary btn-edit" })
            </p>
        </div>
    </div>
    <div class="span10 pull-right">
        <div class="row">
            <ul class="thumbnails">
                @*foreach (var skater in Model)
                {
                    string skaterId = "skater" + skater.Id;
                    
                    <li class="span3 skaters" id="@skaterId">
                        @Html.Action("SkaterView", skater)
                    </li>
                }
            </ul>
            @* <div class="pagination pagination-small">
            <ul>
                <li class="disabled"><span>Forrige</span></li>
                <li class="active"><span>1</span></li>
                <li class="disabled"><span>2</span></li>
                <li class="disabled"><span>3</span></li>
                <li class="disabled"><span>4</span></li>
                <li class="disabled"><span>5</span></li>
                <li class="disabled"><span>Neste</span></li>
            </ul>
        </div>*@
        </div>
    </div>
</div>
-->

@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.prettyPhoto.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.cslider.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.isotope.js")"></script>
    <script src="@Url.Content("~/Scripts/cycle.js")"></script>
    <script src="@Url.Content("~/Scripts/custom.js")"></script>
}


